<template>
  <div class="company-page">
    <h1>企业管理平台</h1>
    <p>欢迎来到企业管理平台，您可以管理招聘和公司信息</p>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>公司概览</span>
          </template>
          <div>
            <el-button type="primary" @click="handleCompanyOverview">公司概览</el-button>
            <el-button type="success" @click="handleCompanyStats">公司统计</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <span>招聘管理</span>
          </template>
          <div>
            <el-button type="primary" @click="handleDeliveryManagement">投递管理</el-button>
            <el-button type="success" @click="handlePositionManagement">岗位管理</el-button>
            <el-button type="warning" @click="handleCandidateManagement">候选人管理</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>公司设置</span>
          </template>
          <div>
            <el-button type="primary" @click="handleCompanyProfile">公司资料</el-button>
            <el-button type="success" @click="handlePersonalCenter">个人中心</el-button>
            <el-button type="warning" @click="handleCompanySettings">公司设置</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <span>招聘工具</span>
          </template>
          <div>
            <el-button type="primary" @click="handleInterviewManagement">面试管理</el-button>
            <el-button type="success" @click="handleOfferManagement">Offer管理</el-button>
            <el-button type="warning" @click="handleRecruitmentAnalytics">招聘分析</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 权限控制示例 -->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>高级功能（需要管理员权限）</span>
          </template>
          <PermissionGuard required-role="admin">
            <div>
              <el-button type="danger" @click="handleAdvancedSettings">高级设置</el-button>
              <el-button type="danger" @click="handleSystemConfig">系统配置</el-button>
              <el-button type="danger" @click="handleUserManagement">用户管理</el-button>
            </div>
          </PermissionGuard>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { showCustomMessage } from '../../utils/message'
import PermissionGuard from '@/components/PermissionGuard.vue'

// 公司概览功能
const handleCompanyOverview = () => {
  showCustomMessage('公司概览功能', 'info')
}

const handleCompanyStats = () => {
  showCustomMessage('公司统计功能', 'info')
}

// 招聘管理功能
const handleDeliveryManagement = () => {
  showCustomMessage('投递管理功能', 'info')
}

const handlePositionManagement = () => {
  showCustomMessage('岗位管理功能', 'info')
}

const handleCandidateManagement = () => {
  showCustomMessage('候选人管理功能', 'info')
}

// 公司设置功能
const handleCompanyProfile = () => {
  showCustomMessage('公司资料功能', 'info')
}

const handlePersonalCenter = () => {
  showCustomMessage('个人中心功能', 'info')
}

const handleCompanySettings = () => {
  showCustomMessage('公司设置功能', 'info')
}

// 招聘工具功能
const handleInterviewManagement = () => {
  showCustomMessage('面试管理功能', 'info')
}

const handleOfferManagement = () => {
  showCustomMessage('Offer管理功能', 'info')
}

const handleRecruitmentAnalytics = () => {
  showCustomMessage('招聘分析功能', 'info')
}

// 高级功能（需要管理员权限）
const handleAdvancedSettings = () => {
  showCustomMessage('高级设置功能', 'info')
}

const handleSystemConfig = () => {
  showCustomMessage('系统配置功能', 'info')
}

const handleUserManagement = () => {
  showCustomMessage('用户管理功能', 'info')
}
</script>

<style scoped>
.company-page {
  padding: 20px;
}

.company-page h1 {
  color: #409eff;
  margin-bottom: 10px;
  font-size: 28px;
}

.company-page p {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

.el-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-card :deep(.el-card__header) {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #303133;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
  min-width: 100px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
